<%@ page import="java.sql.*" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta name="viewport" content="width=device-width, initial-scale=0.5">
    <title>
        购物界面
    </title>
    <link href="https://at.alicdn.com/t/c/font_4156699_i9rfozb6ac.css" rel="stylesheet">
    <link href="CSS/Shop.css" rel="stylesheet">
</head>
<body>
<table>
    <tr>
        <th style="width: 100px;height: 120px">
            <img src="photo/LF1.png" style="height: 120px;">
        </th>
        <th style="padding-left: 50px">
            <div style="padding-left: 408px">
                <form action="searchProduct" method="get">
                    <div class="searchBar">
                        <div class="img1"><i class="iconfont icon-sousuoxiao"></i></div>
                        <div class="textInput">
                            <input class="inp" placeholder="请输入搜索关键字" type="text" name="searchKeyword">
                            <button class="goBtn" type="submit">go</button>
                            <div class="clear"><i class="iconfont icon-close"></i></div>
                        </div>
                    </div>
                </form>
            </div>
            <br>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                百亿补贴
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                百亿补贴
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                万人团购
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                天天特卖
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                办公用品
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                有奖竞猜
            </button>
            <button onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                活动优惠
            </button>
        </th>
        <th>
            <div class="nav h" style="  top: -6px;">
                <!-- 菜单切换部分 -->
                <div class="toggle">
                    <span></span>
                </div>
                <!-- 列表部分 -->
                <ul>
                    <li style="--i:0">主菜单</li>
                    <li onclick="function ShoppingCart() {
            window.location.href='shopcar.jsp';
        }
        ShoppingCart()" style="--i:1">购物车
                    </li>

                    <li onclick="function account() {
            window.location.href='index.jsp';
        }
        account()" style="--i:2">账户

                    <li onclick="function about() {
            window.location.href='upload.html';
        }
        about()" style="--i:3">关于
                    <li onclick="function set() {
                       
            window.location.href='upload.html';
        }
       set()" style="--i:4">设置
                </ul>
            </div>
        </th>
    </tr>
</table>
<table>
    <tr style="border: none;">
        <td class="cebian button" style="width: 20%;">
            <ul>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    家用电器
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    手机、数码、通信
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    电脑、办公
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    家居、家具、家装、厨具
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    男装、女装、童装、内衣
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    个户化妆、清洁用品、宠物
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    鞋靴、箱包、珠宝、奢侈品
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    运动户外、钟表
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    汽车、汽车用品
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    母婴、玩具乐器
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    食品、酒类、生鲜、特产
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    医药保健
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    图书、音像、电子书
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    彩票、旅行、充值、票务
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    理财、众筹、白条、保险
                </li>
            </ul>
        </td>
        <td style="width:60%">
            <iframe src="ShopHead.html" height=675px width=95% style="padding-left: 30px;color: transparent"></iframe>
        </td>
        <td class="cebian" style="padding-right:20px">
            <ul>

                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    购物指南
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    购物流程
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    会员介绍
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    会员介绍
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    生活旅行/团购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    常见问题
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    大家电
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    服装城
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    美妆馆
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    传智超市
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    全球购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    全球购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    闪购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    团购
                </li>
                <li onclick="window.location.href='https://pro.jd.com/mall/active/2vx2zyXR2KhRouYS6LrSEdnLF1P5/index.html'">
                    拍卖
                </li>
            </ul>
        </td>
    </tr>
</table>

<div class="product-container">
    <%
        String url = "jdbc:mysql://localhost:3306/course_design";
        String username = "root";
        String password = "123456";
        Connection conn = null;
        try {
            Class.forName("com.mysql.cj.jdbc.Driver");
            conn = DriverManager.getConnection(url, username, password);
            if (conn != null) {
                Statement stmt = conn.createStatement();
                String sql = "SELECT * FROM products";
                ResultSet rs = stmt.executeQuery(sql);
                String productName1 = null;
                int counter = 0; // 计数器，用于判断每行显示的个数
                while (rs.next()) {
                    String productName = rs.getString("pname");
                    if (productName.length() > 30) {
                        productName1 = productName.substring(0, 30) + "...";
                    }
                    String productDetail = rs.getString("Product_detail");
                    String productUrl = rs.getString("url");
                    double productPrice = rs.getDouble("pprice");
    %>
    <div class="product-item">
        <a href="<%= productDetail %>" target="_blank">
            <img src="<%= productUrl %>" alt="<%= productName %>">
        </a>
        <h3 title="<%= rs.getString("pname") %>"><%= productName1 %></h3>
        <div style="text-align: center;font-size: 22px">价格：￥<%= productPrice %></div>
        <div style="text-align: center;font-size: 15px; text-decoration: line-through;">原价：<%= productPrice - productPrice / 5 %></div>
        <div style="text-align: center;">
            <button onclick="addToCart('<%= productName %>')">加入购物车</button>
        </div>
    </div>
    <%
        counter++;
        // 如果已经显示了5个商品，则换行
        if (counter % 5 == 0) {
    %>
</div>
<div class="product-container">
    <%
                    }
                }
                rs.close();
                stmt.close();
            } else {
                System.err.println("数据库连接失败");
            }
        } catch (Exception e) {
            e.printStackTrace(System.err);
        } finally {
            try {
                if (conn != null) {
                    conn.close();
                }
            } catch (SQLException e) {
                e.printStackTrace(System.err);
            }
        }
    %>
</div>
<script>
    let nav = document.querySelector('.nav')
    let toggle = document.querySelector('.toggle')

    toggle.addEventListener('click', () => {
        toggle.classList.toggle('active')
        nav.classList.toggle('active')
    })

    // 1. 获取元素
    let searchIcon = document.querySelector(".img1")
    let clearIcon = document.querySelector(".clear")
    let searchBar = document.querySelector(".searchBar")
    let inp = document.querySelector(".inp")

    // 2. 点击，切换类 => 改宽实现展开
    searchIcon.addEventListener("click", () => {
        searchBar.classList.toggle("changeWidth")
    })
    // 3. 点击清空
    clearIcon.addEventListener("click", () => {
        inp.value = ""
    })

    window.addEventListener('CartMessage', (event) => {
        // 确保消息来自iframe的源
        if (event.source === document.querySelector('iframe').contentWindow && (event.source === document.getElementById('mobile').contentWindow)) {
            const message = event.data;

            if (message.type === 'CartButtonClick') {
                // 处理按钮点击事件
                console.log(message.data);
                window.location.href = 'shopcar.jsp'
            }
        }
    });
    let cartAnimation = document.getElementById('cart-animation');
    let iframeMobile = document.getElementById('mobile');

    function addToCart(name) {
        window.alert('商品:' + name + '已经加入购物车\n期待您的购买');
        let cart = [];
        if (document.cookie.includes('cart=')) {
            const cookies = document.cookie.split(';');
            for (let i = 0; i < cookies.length; i++) {
                const cookie = cookies[i].trim();
                if (cookie.startsWith('cart=')) {
                    const cartJSON = decodeURIComponent(cookie.substring(5));
                    cart = JSON.parse(cartJSON);
                    break;
                }
            }
        }
        cart.push(name);
        const cartJSON1 = JSON.stringify(cart);
        document.cookie = 'cart=' + encodeURIComponent(cartJSON1) + '; expires=Thu, 01 Jan 2024 00:00:00 UTC; path=/;';

        // 触发自定义事件，通知其他组件购物车有变化
        const event = new CustomEvent('CartMessage', {
            detail: {
                type: 'CartButtonClick',
                data: {
                    name: name,
                    cart: cart
                }
            }
        });
        window.dispatchEvent(event);
    }
</script>
</body>

</html>